<template>
    <vp-dialog ref="editDialogRef" :span="1">
        <template #title><vp-label zh="部门" en="Dprtment"/></template>
        <span class="mb5">
            自动选择子节点
            <el-switch
                class="mb5"
                v-model="autoSelectChildren"
            >
            </el-switch>
        </span>
        <el-tree :data="tableData"
            v-loading = "loading"
            ref = "treeRef"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :default-checked-keys="treeDefaultChecked"
            :check-strictly="true"
            :check-on-click-node="true"
            @check="handleTreeCheck"
        >
            <template  #default="{node}">
                {{$t(node.label)}}
            </template>
        </el-tree>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave" />
        </template>
    </vp-dialog>
</template>
<script lang="ts">
import { defineComponent,reactive,toRefs,ref,onMounted } from 'vue'
import request from '/@/utils/request';

export default defineComponent({
    name:'editDataGroupDprt',
    emits:["formSubmited"],
    components: {},
    setup(props,context) {
        const state = reactive({
            loading: false,
            saveLoading: false,
            id: "",
            tableData: [],
            treeDefaultChecked: [] as string[],
            autoSelectChildren: false,
        })

        const editDialogRef = ref();
        const handleOpen = (id: string)=>{
            state.id = id;
            state.tableData = [];
            state.treeDefaultChecked = [];
            init(id);
            editDialogRef.value.handleOpen();
        }

        const init = (id: string)=>{
            state.loading = true;
            request.get(`/system/dataGroup/dprt/${id}`).then((res)=>{
                state.tableData = res?.data || []
                state.treeDefaultChecked = getDefaultChecked(state.tableData);
            }).finally(()=>state.loading=false);
        }

        const getDefaultChecked = (data: any)=>{
            let defaultChecked = [] as string[];
            data.forEach((value: any) => {
                if(value.checked){
                    defaultChecked.push(value.id);
                }
                if(value.children && value.children.length > 0){
                    defaultChecked = defaultChecked.concat(getDefaultChecked(value.children));
                }
            });
            return defaultChecked;
        }

        const treeRef = ref();

        const handleSave = ()=>{
            if(state.loading){
                return;
            }
            let checkedArray = treeRef.value.getCheckedNodes();
            checkedArray = checkedArray.concat(treeRef.value.getHalfCheckedNodes());
            if(checkedArray.length == 0){
                return;
            }
            state.saveLoading = true;
            request.post(`/system/dataGroup/dprt/${state.id}`,checkedArray).then(()=>{
                context.emit("formSubmited");
                editDialogRef.value.handleClose();
            }).finally(()=>{
                state.saveLoading = false;
            })
        }
        //树checkbox点击事件
        const handleTreeCheck = (node: any, checked:any)=>{
            let flag = checked.checkedKeys.includes(node.id);
            if(flag){
                //选中则将上级节点设置选中
                // let treeNode = treeRef.value.getNode(node.id);
                // while(treeNode.parent){
                //     treeNode = treeNode.parent;
                //     treeRef.value.setChecked(treeNode, true, false);
                // }

                //自动勾选子节点时将子节点连动
                if(state.autoSelectChildren){
                    cascadeTreeChildCheck(node.children, true)
                }
            }else{
                //取消选中将子节点全部取消选中
                cascadeTreeChildCheck(node.children, false)
            }
        }

        //级联处理子节点勾选
        const cascadeTreeChildCheck = (children: [], flag: boolean)=>{
            if(children && children.length > 0){
                children.forEach(child => {
                    treeRef.value.setChecked(child.id, flag, false);
                    cascadeTreeChildCheck(child.children, flag);
                });
            }
        }


        return {
            ...toRefs(state),
            editDialogRef,
            handleSave,
            handleOpen,
            treeRef,
            handleTreeCheck,
        }
    },
})
</script>
